<template>
	<view class="product-detail-main">
		<h3 class="txt-center title">{{item.title}}</h3>
		<view class="txt-center common-title-line">
			<text class="line"></text>
			<h3 class="content">简介</h3>
		</view>
		<h5 class="sub-title circle">基本信息</h5>
		<view class="detail">{{item.detail}}</view>
		<img class="img" v-for="(img,index) in item.images" :key="index" :src="img">
		<!-- 其他信息 -->
		<section>
			<view class="txt-center common-title-line">
				<text class="line"></text>
				<h3 class="content">其他信息</h3>
			</view>
			<view class="font-sm traffic">
				地址:{{item.address}}
				<h5 class="space"></h5>
				联系电话：{{item.tel}}
			</view>
		</section>
	</view>
</template>

<script>
    export default{
        data(){
            return{
                item:{
                    title:"莫干山隐西39精品民宿",
                    detail:"身居山坞，竹林环绕，莫干山隐西39精品民宿隐居于莫干山下，被游客赞誉为充满乡村风情与时尚元素而组合的居停空间。在竹林泡池中忘却烦忧，在山顶发呆亭里放空身心，或许，身处城市“挖空心思”都想不通的事情，一瞬间就能豁然开朗。",
                    images:["http://p-product-pic-zj.tourzj.com/2018/0729/fc9988c4.jpg!960","http://p-product-pic-zj.tourzj.com/2018/0729/fc9988c4.jpg!960","http://p-product-pic-zj.tourzj.com/2018/0729/fc9988c4.jpg!960"],
                    address:"德清县对河口村西岑坞姚家39号，近石门坑",
                    tel:"15967110303"
                }
            }
        }
    }
</script>

<style>
    @import '/static/css/reset.css';
	.font-sm {
		font-size: .7rem !important;
	}

	.product-detail-main {
		margin-top: 0.5rem;
		padding: 3rem 1.2rem;
		background-color: #fff;
	}

	.product-detail-main .title {
		margin-bottom: .5rem;
		font-size: 0.8rem;
	}

	.product-detail-main .common-title-line {
		position: relative;
		height: 3rem;
		line-height: 3rem;
	}

	.product-detail-main .common-title-line .line {
		position: absolute;
		top: 50%;
		left: 0px;
		right: 0px;
		transform: translateY(-50%);
		height: 1px;
		background-color: #cecece;
	}

	.product-detail-main .common-title-line .content {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		display: inline-block;
		padding: 0 1rem;
		background-color: #fff;
		font-size: 0.8rem;
	}

	.product-detail-main .circle {
		position: relative;
		/* padding-left: 0.8rem; */
		font-size: 0.6rem;
	}

	.product-detail-main .sub-title {
		line-height: 3rem;
	}

	.product-detail-main .detail {
		line-height: 2rem;
		font-size: .6rem;
	}

	.product-detail-main .img {
		width: 100%;
		margin-top: 1.8rem;
	}

	.product-detail-main .info {
		margin-bottom: 3rem;
		line-height: 1rem;
	}

	.product-detail-main .info .item {
		font-size: 0.8rem;
		color: #2D2D2D;
		width: 50%;
		margin-bottom: 10px;
		text-align: left;
		text-overflow: ellipsis;
		width: 100%;
		overflow: hidden;
		white-space: nowrap;
	}

	.product-detail-main .info .opentime {
		font-size: 0.8rem;
		display: flex;
		align-items: flex-start;
	}

	.product-detail-main .space {
        /* font-size: 0.6rem; */
		height: 0px;
		margin-top: 1.5rem;
	}

	.flex-shrink {
		flex-shrink: 0;
	}
</style>
